<template>
  <div class="w-full">
    <a-input-group class="w-full">
      <a-input placeholder="请点击右侧按钮选择图标" v-if="props.preview" allow-clear v-model="currentIcon" />
      <div class="icon-container" v-if="props.preview">
        <component :is="currentIcon" v-if="currentIcon" />
      </div>
      <a-button type="primary" @click="() => (visible = true)">选择图标</a-button>
    </a-input-group>

    <a-modal v-model:visible="visible" width="800px" draggable :footer="false">
      <template #title>选择图标</template>
      <a-tabs class="tabs">
        <a-tab-pane key="mine" title="系统">
          <div class="arco overflow-auto h-full grid grid-cols-5 text-xs gap-2">
            <div v-for="item in list" :key="item" class="justify-center">
              <a-button
                long
                :title="item.name"
                class="bi-icon-span"
                :class="`bi-${item.icon}${item.type !== 'Editor' ? `-line` : ''}`"
                @click="selectIcon(`bi-${item.icon}${item.type !== 'Editor' ? `-line` : ''}`)"
              />
              {{ item.name }}
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="arco" title="Arco Design">
          <ul class="arco">
            <li v-for="icon in arcodesignIcons" :key="icon" @click="selectIcon(icon, 'arco')">
              <component :is="icon" />
            </li>
          </ul>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue"
import * as arcoIcons from "@arco-design/web-vue/es/icon"
import icons from "../xiriIcon/tags.json"

const mineadminIcons = reactive([])
const arcodesignIcons = reactive([])
const visible = ref(false)
const currentIcon = ref()

const props = defineProps({
  modelValue: { type: String },
  preview: { type: Boolean, default: true }
})

const emit = defineEmits(["update:modelValue"])

onMounted(() => (currentIcon.value = props.modelValue))

for (const icon in arcoIcons) {
  arcodesignIcons.push(icon)
}

arcodesignIcons.pop()

const modules = import.meta.glob("../../assets/ma-icons/*.vue")
for (const path in modules) {
  const name = path.match(/([A-Za-z0-9_-]+)/g)[2]
  mineadminIcons.push(`MaIcon${name}`)
}

const selectIcon = (icon, className) => {
  currentIcon.value = icon
  emit("update:modelValue", currentIcon.value)
  visible.value = false
}

const handlerChange = (value) => {
  selectIcon(value, "")
}

const list = ref([])
Object.keys(icons).forEach((item) => {
  const key = Object.entries(icons[item])
  key.forEach((v) => {
    list.value.push({
      type: item,
      name: v[1],
      icon: v[0]
    })
  })
})
</script>

<style scoped lang="less">
.icon-container {
  width: 50px;
  height: 32px;
  background-color: var(--color-fill-1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon {
  width: 1em;
  fill: var(--color-text-1);
}

.tabs {
  ul {
    display: flex;
    flex-wrap: wrap;
    padding-left: 7px;
  }

  li {
    border: 2px solid var(--color-fill-4);
    margin-bottom: 10px;
    margin-right: 6px;
    padding: 5px;
    cursor: pointer;
  }

  li:hover,
  li.active {
    border: 2px solid rgb(var(--primary-6));
  }

  & li svg {
    width: 2.4em;
    height: 2.4em;
  }
}
:deep(.arco-select-option-content) {
  width: 100%;
}
</style>
